<template>
  <div class="mine-page">
    <!-- 顶部用户信息卡片 -->
    <div class="user-card">
      <div class="user-header">
        <image class="avatar" :src="userInfo.avatar" mode="aspectFill" />
        <div class="user-info">
          <text class="nickname">{{ userInfo.nickname || '未登录' }}</text>
         <text class="vip-tag">ID:202511043455</text>
        </div>
      </div>
      <div class="stat-row">
        <div class="stat-item">
          <text class="value">{{ userInfo.balance }}</text>
          <text class="label">我的收益</text>
        </div>
        <div class="stat-item">
          <text class="value">{{ userInfo.points }}</text>
          <text class="label">积分</text>
        </div>
        <div class="stat-item">
          <text class="value">{{ userInfo.coupons }}</text>
          <text class="label">我的预存</text>
        </div>
      </div>
    </div>

    <!-- 服务菜单列表 -->
    <div class="service-list">
      <div 
        class="service-item" 
        v-for="(item, index) in allServices" 
        :key="index"
        @click="navigateTo(item.path)"
      >
        <div class="left">
          <div class="service-icon" :class="item.class">
            <uni-icons :type="item.icon" size="20" color="#fff"></uni-icons>
          </div>
          <text class="service-name">{{ item.name }}</text>
        </div>
        <div class="right">
          <text v-if="item.desc" class="desc">{{ item.desc }}</text>
          <uni-icons type="right" size="14" color="#999"></uni-icons>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'profileB',
  data() {
    return {
      userInfo: {
        avatar: 'https://mp-cf247fe4-80e2-458f-9533-66f43af127c0.cdn.bspapp.com/avatar/10.webp',
        nickname: '云端淑女',
        userId: '88888888',
        balance: '888.88',
        points: '520',
        coupons: '5'
      },
      allServices: [
        { name: '全部账单', icon: 'calendar-filled', path: '/pages/my/bill', class: 'bg-green' },
        { name: '预收入明细', icon: 'map-filled', path: '/pages/my/income', class: 'bg-purple' },
        { name: '联系客服', icon: 'headphones', path: '/pages/service/index', class: 'bg-orange', desc: '在线客服' },
        { name: '帮助中心', icon: 'help', path: '/pages/help/index', class: 'bg-cyan' },
        { name: '意见反馈', icon: 'chat', path: '/pages/feedback/index', class: 'bg-pink' },
        { name: '设置', icon: 'gear', path: '/pages/settings/index', class: 'bg-gray' }
      ]
    }
  },
  methods: {
    navigateTo(path) {
      uni.navigateTo({ url: path })
    }
  }
}
</script>

<style lang="scss" scoped>
.mine-page {
  min-height: 100vh;
  background: #f5f6fa;
  padding: 30rpx;
  padding-top:3rem;
}

.user-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);

  .user-header {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 60rpx;
      margin-right: 30rpx;
    }

    .user-info {
      flex: 1;

      .nickname {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 12rpx;
        display: block;
      }

      .vip-tag {
        background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
        color: #fff;
        font-size: 24rpx;
        padding: 4rpx 16rpx;
        border-radius: 20rpx;
        display: inline-block;
      }
    }

    .qr-code {
      width: 72rpx;
      height: 72rpx;
      border-radius: 36rpx;
      background: #f5f6fa;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .stat-row {
    display: flex;
    padding-top: 30rpx;
    border-top: 2rpx solid #f5f6fa;

    .stat-item {
      flex: 1;
      text-align: center;

      .value {
        font-size: 40rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 8rpx;
        display: block;
      }

      .label {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.order-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;

    .title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }

    .more {
      display: flex;
      align-items: center;
      
      text {
        font-size: 26rpx;
        color: #999;
        margin-right: 8rpx;
      }
    }
  }

  .order-list {
    display: flex;
    justify-content: space-between;

    .order-item {
      flex: 1;
      text-align: center;

      .icon-wrapper {
        width: 100rpx;
        height: 100rpx;
        margin: 0 auto 0;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        .count-badge {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
          background: #ff4d4f;
          color: #fff;
          font-size: 20rpx;
          min-width: 32rpx;
          height: 32rpx;
          line-height: 32rpx;
          text-align: center;
          border-radius: 16rpx;
          padding: 0 8rpx;
        }

        .order-icon {
          width: 56rpx;
          height: 56rpx;
        }
      }

      .order-name {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30rpx;
  margin-bottom: 30rpx;

  .action-item {
    background: #fff;
    border-radius: 24rpx;
    padding: 30rpx 20rpx;
    text-align: center;
    box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);

    .action-icon {
      width: 80rpx;
      height: 80rpx;
      border-radius: 40rpx;
      margin: 0 auto 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .action-name {
      font-size: 26rpx;
      color: #666;
    }
  }
}

.service-list {
  background: #fff;
  border-radius: 24rpx;
  padding: 10rpx 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);

  .service-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 0;
    border-bottom: 2rpx solid #f5f6fa;

    &:last-child {
      border-bottom: none;
    }

    .left {
      display: flex;
      align-items: center;

      .service-icon {
        width: 64rpx;
        height: 64rpx;
        border-radius: 32rpx;
        margin-right: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .service-name {
        font-size: 28rpx;
        color: #333;
      }
    }

    .right {
      display: flex;
      align-items: center;

      .desc {
        font-size: 24rpx;
        color: #999;
        margin-right: 16rpx;
      }
    }
  }
}

// 背景色
.bg-red { background: #ff4d4f; }
.bg-blue { background: #1890ff; }
.bg-green { background: #52c41a; }
.bg-purple { background: #722ed1; }
.bg-orange { background: #fa8c16; }
.bg-cyan { background: #13c2c2; }
.bg-pink { background: #eb2f96; }
.bg-gray { background: #666666; }
</style> 